<template>
  <div class="data">
    <div class="time">
      <div class="now">
        <span>当前日期 </span><span>{{ nowDate(b) }}</span>
      </div>
      <div class="num">
        <div class="inp">
          工号: <input type="text" placeholder="请输入工号" v-model="input" />
        </div>
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              :size="size"
            />
          </div>
        </div>

        <div class="query" @click="search">查询</div>
        <img src="../../../assets/images/02.png" alt="" />
      </div>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="工号" width="100" />
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="branch" label="部门" width="100" />
      <el-table-column prop="should" label="应签到" width="100" />
      <el-table-column prop="sign" label="实签到" width="100" />
      <el-table-column prop="Should" label="应签退" width="100" />
      <el-table-column prop="out" label="实签退" width="100" />
      <el-table-column prop="remarks" label="备注" />
    </el-table>

    <el-pagination
      small
      background
      :page-size="10"
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
      class="mt-4"
    />
  </div>

  <div class="bottom">
    <div class="pic">
      <div class="pir">
        <div id="main"></div>
        <p>{{ nowDate(b) }} 19:00</p>
      </div>
      <div class="all">
        <p class="center">通勤统计</p>
        <p>打卡次数</p>
        <span style="color: #555555">100</span>
        <p>迟到次数</p>
        <span style="color: #fe908f">30</span>
        <p>按时次数</p>
        <span style="color: #95ff7c">70</span>
      </div>

      <div class="pre-z">
        <p style="font-size: 60px; color: #fe908f">30%</p>
        <p style="color: #888888; font-size: 16px">迟到占比</p>
      </div>
    </div>

    <div class="pic">
      <div class="pir">
        <div id="main2"></div>
        <p>{{ nowDate(b) }} 19:00</p>
      </div>

      <div class="all">
        <p class="center">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <p>打卡次数</p>
        <span style="color: #555555">50</span>
        <p>迟到次数</p>
        <span style="color: #fe908f">15</span>
        <p>按时次数</p>
        <span style="color: #95ff7c">35</span>
      </div>
      <div class="pre-z">
        <p style="font-size: 60px; color: #fe908f">30%</p>
        <p style="color: #888888; font-size: 16px">迟到占比</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
// import data from "../../../mock/kaoqin";
import "@/mock/kaoqin";
import axios from "axios";

const value = ref("");

const options = [
  {
    value: "Option1",
    label: "医师",
  },
  {
    value: "Option2",
    label: "护士",
  },
  {
    value: "Option3",
    label: "后勤",
  },
];

interface ItemType {
  id: string;
  name: string;
  branch: string;
  should: string;
  sign: string;
  Should: string;
  out: string;
  remarks: null;
}

// console.log(data);
const tableData = ref([]);
const total = ref<number>(0);
const input = ref<string>("");

onMounted(() => {
  getDate();
});

const getDate = (page?: number) => {
  axios
    .post("/api/kaoqin/list", {
      pageSize: 10,
      currentPage: page || 1,
      search: input.value,
    })
    .then((res) => {
      // console.log(res);
      // console.log(res.data.result);

      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const pageChange = (page: number) => {
  getDate(page);
};

const search = () => {
  getDate();
};

//当前日期
let a = new Date().getTime(); //获取到当前时间戳
let b = new Date(a); //创建一个指定的日期对象
function nowDate(now: any) {
  let year = now.getFullYear(); //年份
  let month = now.getMonth() + 1; //月份（0-11）
  let date = now.getDate(); //天数（1到31）
  return year + "-" + month + "-" + date;
}

const size = ref<"default" | "large" | "small">("small");

const value1 = ref("");

const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

onMounted(() => {
  const main = document.getElementById("main");

  if (main) {
    const option = echarts.init(main);
    option.setOption({
      title: { text: "●公司出勤率", show: true },
      color: ["#CCCCCC ", "#FE908F"],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1000, name: "未迟到" },
            { value: 300, name: "迟到30%" },
          ],
        },
      ],
    });
  }
});

onMounted(() => {
  const main2 = document.getElementById("main2");

  if (main2) {
    const option = echarts.init(main2);
    option.setOption({
      title: { text: "●部门通勤率", show: true },
      color: ["#CCCCCC ", "#FE908F"],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1000, name: "未迟到" },
            { value: 300, name: "迟到30%" },
          ],
        },
      ],
    });
  }
});
</script>

<style lang="less" scoped>
.data {
  width: 100%;
  height: 600px;
  box-sizing: border-box;
  padding: 20px;
  // border: 1px solid black;

  .el-pagination {
    margin-top: 10px;
    justify-content: flex-end;
  }
  :deep(.is-leaf) {
    background: #e7dcc7;
  }
  .time {
    width: 100%;
    height: 30px;
    margin: 10px 0px;

    .now {
      width: 20%;
      height: 30px;
      float: left;
    }
    .num {
      width: 65%;
      height: 30px;
      float: right;
      display: flex;
      flex-shrink: 0;

      input {
        width: 150px;
        height: 20px;
        background: #f8f8f8;
        border: none;
      }

      .query {
        width: 50px;
        height: 24px;
        background: #6096db;
        border-radius: 6px;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        margin: 0px 5px;
        color: #fff;
        font-weight: 700;
        cursor: pointer;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.bottom {
  display: flex;
  flex-shrink: 0;
  .pic {
    display: flex;
    flex-shrink: 0;
    width: 600px;
    height: 300px;
    position: relative;

    .pre-z {
      text-align: center;
      position: absolute;
      top: 80px;
      left: 88px;
      p {
        margin: 0;
      }
    }

    .pir {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      justify-content: center;

      #main {
        width: 300px;
        height: 260px;
      }

      #main2 {
        width: 300px;
        height: 260px;
      }

      p {
        margin: 5px;
        font-size: 20px;
        font-weight: 600;
        color: #888888;
        text-align: center;
      }
    }

    .all {
      width: 299px;
      height: 300px;
      border-left: 1px solid grey;
      padding: 10px;
      box-sizing: border-box;
      color: #888888;
      text-align: center;

      span {
        font-size: 40px;
      }
      p {
        margin: 0;
        text-align: left;
      }

      .center {
        text-align: center;
        margin-bottom: 10px;
      }

      :deep(.el-input__wrapper) {
        width: 50px;
        flex-grow: 0;
        :deep(.el-input__inner) {
          width: 50px;
        }
      }
    }
  }
}
</style>
